<template title="请求参数-返回参数">
    <div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="文档参数" name="doc">
                <el-table
                        :data="data"
                        style="width: 100%;margin-top: 30px"
                        border
                        default-expand-all
                        row-key="key"
                        :tree-props="{children: 'parameters'}">
                    <el-table-column
                            prop="name"
                            label="参数名称"
                            width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="dataType"
                            label="数据类型" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div>
                                <div  v-if="scope.row.extendDescr!=null && scope.row.extendDescr.length>0">
                                    <el-popover trigger="hover" placement="top">
                                        <div
                                                v-for="x in scope.row.extendDescr">
                                            <p>{{x}}</p>
                                        </div>
                                        <div slot="reference" class="name-wrapper">
                                            <el-tag size="medium">{{ scope.row.dataType }}</el-tag>
                                        </div>
                                    </el-popover>
                                </div>
                                <div v-else>
                                    <p>{{ scope.row.dataType}}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="required"
                            label="是否必须" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.required+''}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="defaultValue"
                            label="默认值" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="example"
                            label="示例" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="value"
                            label="备注" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="描述" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="mock数据" name="mock">
                <div style="margin-bottom: 20px;">
                    <el-button @click="addTab(editableTabsValue)">
                        添加条件
                    </el-button>
                    <el-button>
                        实体参数
                    </el-button>
                </div>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name">
                        <el-tabs v-model="mockActiveName" type="card">
                            <el-tab-pane label="参数" name="first">
                                <el-table
                                        :data="tableData1[index]"
                                        style="width: 100%;margin-top: 30px"
                                        border
                                        default-expand-all
                                        row-key="key"
                                        :tree-props="{children: 'parameters'}">
                                    <el-table-column
                                            prop="name"
                                            label="参数名称"
                                            width="150" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column
                                            prop="dataType"
                                            label="数据类型" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column
                                            prop="required"
                                            label="是否必须" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            {{scope.row.required+''}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="defaultValue"
                                            label="默认值">
                                        <template slot-scope="scope">
                                            <el-button type="primary" icon="el-icon-plus" circle
                                                       v-if="scope.row.modelType=='ARRAY' &&
                                                (scope.row.parameters!=null && scope.row.parameters.length>0)"></el-button>
                                            <el-input v-else-if="scope.row.modelType=='BASE_DATA'"
                                                      placeholder="请输入内容"
                                                      v-model="scope.row.defaultValue"
                                                      type="textarea"
                                                      clearable>
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="example"
                                            label="示例" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column
                                            prop="value"
                                            label="备注" show-overflow-tooltip>
                                    </el-table-column>
                                    <!--                    <el-table-column-->
                                    <!--                            prop="description"-->
                                    <!--                            label="描述" show-overflow-tooltip>-->
                                    <!--                    </el-table-column>-->
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="条件" name="second">
                                <div style="margin-bottom: 20px">
                                    <el-button plain type="primary" @click="mockAddVisible=true">添加</el-button>
                                </div>
                                <el-table :data="gridData">
                                    <el-table-column property="date" label="名称"></el-table-column>
                                    <el-table-column property="name" label="创建人"></el-table-column>
                                    <el-table-column property="address" label="操作">
                                        <template slot-scope="scope">
                                            <el-button plain size="small">编辑</el-button>
                                            <el-button plain size="small">删除</el-button>
                                            <el-button plain size="small" type="danger">禁用</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>

                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="mock条件" width="50%" :visible.sync="mockAddVisible">
            <el-form label-position="right" label-width="120px" :model="mockForm">
                <el-form-item label="名称：">
                    <el-input v-model="mockForm.name"></el-input>
                </el-form-item>
                <el-form-item label="参数：">
                    <div v-for="(it,index) in mockParams" class="queryAdd">

                        <el-input v-model="it.key"></el-input>
                        <el-input
                                placeholder="请输入内容"
                                v-model="it.value"
                                class="queryadd-two-input"

                                clearable>
                        </el-input>
                        <div v-if="mockParams.length>1">
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="removeParams(index)"></el-button>
                        </div>
                    </div>
                    <el-button @click="addParam">添加参数</el-button>
                </el-form-item>
                <el-form-item label="Http状态：">
                    <el-select v-model="httpStatu" clearable placeholder="请选择">
                        <el-option
                                v-for="item in httpStatus"
                                :key="item.code"
                                :label="item.code"
                                :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="延迟：">
                    <el-input-number v-model="mockForm.time" :precision="1" :step="1" :max="100000"></el-input-number>
                </el-form-item>
                <el-form-item label="Http头：">
                    <div v-for="(it,index) in mockHeaders" class="queryAdd">
                        <el-input v-model="it.key"></el-input>
                        <el-input
                                placeholder="请输入内容"
                                v-model="it.value"
                                class="queryadd-two-input"
                                clearable>
                        </el-input>
                        <div v-if="mockHeaders.length>1">
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="removeHeaders(index)"></el-button>
                        </div>
                    </div>
                    <el-button @click="addHeader">添加参数</el-button>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer" align="center">
                <el-button @click="mockAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="mockAddVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            tableData: {
                type: Array
            }
        },
        mounted() {
            this.data = this.tableData[0].parameters;
            this.tableData1[this.tabIndex - 1] = this.tableData[0].parameters;
        },
        data() {
            return {
                mockTableVisible: false,
                mockAddVisible: false,
                tableData1: {},
                data: [],
                activeName: 'doc',
                mockActiveName: "first",
                editableTabsValue: '1',
                mockForm: {},
                httpStatu: "",
                httpStatus: [{
                    code: 200
                }, {
                    code: 201
                }, {
                    code: 202
                }],
                editableTabs: [{
                    title: '条件1',
                    name: '1',
                    content: '条件1'
                }],
                mockParams: [{
                    key: "",
                    value: ""
                }],
                mockHeaders: [{
                    key: "",
                    value: ""
                }],
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                tabIndex: 1
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            /**
             * 添加规则策略
             * @param targetName
             */
            addTab(targetName) {
                let newTabName = ++this.tabIndex + '';
                this.tableData1[this.tabIndex - 1] = JSON.parse(JSON.stringify(this.tableData[0].parameters));
                this.editableTabs.push({
                    title: `条件${this.tabIndex}`,
                    name: newTabName,
                    content: '条件'
                });
                this.editableTabsValue = newTabName;

            },
            /**
             * 删除规则策略
             * @param targetName
             */
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                if (this.editableTabs.length == 1) {
                    this.tabIndex = 1;
                }
            },
            addParam() {
                this.mockParams.push({key: "", value: ""})
            },
            addHeader() {
                this.mockHeaders.push({key: "", value: ""})
            },
            removeParams(index) {
                delete this.mockParams[index];
                this.mockParams = this.mockParams.filter((i) => i != null);
            },
            removeHeaders(index) {
                delete this.mockHeaders[index];
                this.mockHeaders = this.mockHeaders.filter((i) => i != null);
            }
        }
    }
</script>

<style scoped>
    ::v-deep table {
        margin: 0px;
    }

    .queryAdd {
        display: flex;
        /*justify-content: space-between;*/
        margin-bottom: 10px;
    }

    .queryAdd ::v-deep .el-input {
        width: 300px;
    }

    .queryAdd ::v-deep .el-input.queryadd-two-input {
        margin-left: 10px;
        margin-right: 10px
    }
</style>
